import { useState } from 'react'
import { List, Loading, toast, Card } from '../dComponent';
let timer
function Plist(props){
    let [list, setList] = useState(['listItem'])
    let [loading, setLoading] = useState(false)
    return(
        <div className="page" style={{position:"relative"}}>
            <Loading 
                visible={loading}
                type={1}
                tips='加载中'
            >
                <List
                    onBottom = {()=>{
                        if(list.length >= 15){
                            toast.info('没有更多数据~')
                            return
                        }
                        setLoading(true)
                        clearTimeout(timer)
                        timer = setTimeout(() => {
                            setList(list.concat('xxx'))
                            setLoading(false)
                        }, 2000 * Math.random());
                    }}
                >

                    {list.map((val, idx)=>{
                        return(
                            <Card key={Math.random()}>{val + idx}</Card>
                        )
                    })}
                
                </List> 
            </Loading>
        </div>
    )
}
export default Plist